import {
    ModalForm,
    ProFormCheckbox,
    ProFormDigit,
    ProFormRadio,
    ProFormSwitch,
    ProFormText,
    ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useMemo } from 'react';

type FormProps = {
    visible: boolean;
    current: API.ArticleModel | undefined;
    onCancel: () => void;
    onSubmit: (values: API.ArticleModel) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
    const { visible, current, onCancel, onSubmit } = props;
    if (!visible) {
        return null;
    }

    let defaultCurrent: Partial<API.ArticleModel> | undefined = undefined;

    return (
        <ModalForm<API.ArticleModel>
            // layout="horizontal"
            // labelCol={{ span: 4 }}
            // wrapperCol={{ span: 18 }}
            open={visible}
            initialValues={current ? current : defaultCurrent}
            //preserve={false}
            // trigger={<>{children}</>}
            title={`${current ? '编辑' : '添加'}文章`}
            width={640}
            onFinish={onSubmit}
            modalProps={{
                onCancel: onCancel,
                //destroyOnClose: true,
                maskClosable: false,
            }}
        >
            <ProFormText
                name="article_title"
                label="名称"
                rules={[{ required: true, message: '请输入标题' }]}
                placeholder="请输入标题"
            />
            <ProFormTextArea name="article_content" label="内容" />
        </ModalForm>
    );
};

export default Form;
